import { useState } from 'react';
import { Tooltip } from 'antd';

import { useNavigate } from 'react-router-dom'

import { TopDateTemplate } from '../data'
import { VChartA01 } from '../../Utils/ChartsRender'
import { useEventEmitter, useMount } from 'ahooks';
import { useRequest } from 'alova/client';
import { Http } from '../../Utils/Api';
import { SwapOutlined } from '@ant-design/icons';
import { useEffect } from 'react';

import { startTitleStore } from '../../Config/zustand'



const List = [
    { label: '收入', value: 'A01' },
    { label: '成本', value: 'A02' },
    { label: '利润', value: 'A03' },
    { label: '合同资产', value: 'A04' },
    { label: '在手订单', value: 'A05' },
]

const LeftTableTop = [
    { label: '单位名称' },
    { label: '收入', flex: 1 },
    { label: '成本', flex: 1 },
    { label: '利润', flex: 1 },
    { label: '合同资产', flex: 1 },
    { label: '在手订单', flex: 1 },
]

const RightTopNav = [
    { value: 0, label: '收入情况' },
    { value: 1, label: '利润情况' },
]

const TypeA01Data = (num) => {
    let countries = "建工项目,龙建股份,安装集团,旅投集团,水利水电集团,水投项目,一恒建设,龙创置业,一森生态".split(",")
    const data = [...Array(num)].map((_, i) => ({
        uuid: i,
        tableName: countries[i % countries.length],
        A01: Math.floor(Math.random() * 100),
        A02: Math.floor(Math.random() * 100)
    }))
    return data
}


const UnitMapping = { 1: '亿元', 2: '万元' }


const A01 = ({ uuid }) => {
    const Navigate = useNavigate()
    const { updateProjectTitle } = startTitleStore()

    const [Date, setDate] = useState()

    const [DataWA01, setDataWA01] = useState({ A01: 0, A02: 0, A03: 0, A04: 0, A05: 0 })
    const [DataYA01, setDataYA01] = useState({ A01: 0, A02: 0, A03: 0, A04: 0, A05: 0 })
    const [DataYFA01, setDataYFA01] = useState({ A01: 0, A02: 0, A03: 0, A04: 0, A05: 0 })

    const [TableData, setTableData] = useState([])
    const [ChartData, setChartData] = useState([])
    const [ChartsField, setChartsField] = useState()
    const [ChartsStyle, setChartsStyle] = useState()

    const [Acitve, setActive] = useState(0)

    const [UnitSwitch, setUnitSwitch] = useState(1)
    const { send } = useRequest((data) => Http(data), { immediate: false })

    const onDownward = (e, levelId) => {
        if (levelId > 0) Navigate(`/Start/Page/A01/${e}`)
    }

    const onRightTopNav = (e) => {
        const data = e === 0 ? JSON.parse(JSON.stringify(ChartsField).replace(/计划利润/g, '计划收入').replace(/实际利润/g, '实际收入').replace(/利润目标/g, '收入目标').replace(/利润/g, '收入')) :
            JSON.parse(JSON.stringify(ChartsField).replace(/计划收入/g, '计划利润').replace(/实际收入/g, '实际利润').replace(/收入目标/g, '利润目标').replace(/收入/g, '利润'))
        const arr = TableData.flatMap(item => data.map(({ name, type, value }) => ({ name, type: item[type], value: item[value] })))
        setChartData(arr)
        setChartsField(data)
        setActive(e)
    }


    useEffect(() => {
        const YearMonth = sessionStorage.getItem('YearMonth')
        if (YearMonth) setDate(YearMonth)
        else send({ url: 'getScreenManageYearMonth', params: { organizationUuid: uuid } }).then(res => setDate(res.data.eventDate))
    }, [uuid])

    useEffect(() => {
        if (Date) {
            send({ url: 'getScreenManageList', params: { organizationUuid: uuid, YearMonth: Date } }).then(res => {
                const { organizationName, wanyuan, yiyuanzhengshu, yiyuanxiaoshu } = res.data
                updateProjectTitle(organizationName)
                setDataWA01({ A01: wanyuan.收入, A02: wanyuan.成本, A03: wanyuan.利润, A04: wanyuan.合同资产, A05: wanyuan.在手订单 })
                setDataYA01({ A01: yiyuanzhengshu.收入, A02: yiyuanzhengshu.成本, A03: yiyuanzhengshu.利润, A04: yiyuanzhengshu.合同资产, A05: yiyuanzhengshu.在手订单 })
                setDataYFA01({ A01: yiyuanxiaoshu.收入, A02: yiyuanxiaoshu.成本, A03: yiyuanxiaoshu.利润, A04: yiyuanxiaoshu.合同资产, A05: yiyuanxiaoshu.在手订单 })
            })

            send({ url: 'getJSONData', params: { Uuid: 'ChartStyle/管理柱图' } }).then(res => {
                const { ChartsField, ChartsStyle } = res
                send({ url: 'getScreenManageCompanyList', params: { organizationUuid: uuid, YearMonth: Date } }).then(org => {
                    const data = org.data.list
                    const arr = data.flatMap(item => ChartsField.map(({ name, type, value }) => ({ name, type: item[type], value: item[value] })))
                    setChartData(arr)
                    setTableData(org.data.list)
                    setChartsField(ChartsField)
                    setChartsStyle(ChartsStyle)
                })
            })
        }
    }, [Date, uuid])



    const Event = useEventEmitter()
    Event.useSubscription(val => {
        const { type, data } = val
        if (type === 'onDate') setDate(data)
        if (type === 'onUnit') setUnitSwitch(data === 1 ? 2 : 1)
    })

    return (
        <div className='A01'>
            {Date && <TopDateTemplate date={Date} unit={UnitSwitch} Event={Event} />}

            <div className="DataA01">
                {List.map(({ label, value }, index) =>
                    <div key={index}>
                        <div >{label}</div>
                        <Tooltip placement='bottom' title={UnitSwitch === 1 ? DataYFA01[value] : DataWA01[value]} overlayStyle={{ fontSize: 48, fontFamily: 'HYT' }}>
                            <div>{UnitSwitch === 1 ? DataYA01[value] : DataWA01[value]}</div>
                        </Tooltip>
                    </div>
                )}
            </div>
            <div className='BtmBox'>
                <div className='Left'>
                    <div className='Title'>经济运行情况</div>
                    <div className='Top'>
                        {LeftTableTop.map(({ label, flex }, index) =>
                            <div key={index} style={flex ? { flex } : { width: 130 }}>{label}</div>
                        )}
                    </div>
                    <div className='List'>
                        {TableData.map(({ uuid, 公司名称, 收入, 成本, 利润, 合同资产, 在手订单, levelId }) =>
                            <div key={uuid}>
                                <div onClick={() => onDownward(uuid, levelId)}>{公司名称}</div>
                                <div>
                                    <div>{收入}</div>
                                    <div>{成本}</div>
                                    <div>{利润}</div>
                                    <div>{合同资产}</div>
                                    <div>{在手订单}</div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
                <div className='Right'>
                    <div className='Title'>
                        {RightTopNav.map(({ value, label }) =>
                            <div key={value} className={Acitve === value ? 'active' : ''} onClick={() => onRightTopNav(value)}>
                                {label}
                            </div>
                        )}
                    </div>
                    <div className='Charts'>
                        {ChartsField && ChartsStyle && <VChartA01 data={ChartData} field={ChartsField} style={ChartsStyle} />}

                        {/* {ChartsField && ChartsStyle && Acitve === 0 ?
                            <VChartA01 data={ChartData} field={ChartsField} style={ChartsStyle} /> :
                            <VChartA01 data={ChartDataA02} field={ChartsField} style={ChartsStyle} />
                        } */}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default A01;